import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
type Props = {};

const Pie = (props: Props) => {
  const keywords = useRef<any>();
  useEffect(() => {
    const myChart = echarts.init(keywords.current);
    option && myChart.setOption(option);
  }, []);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "0",
      left: "center",
      borderRadius: "100%",
      itemWidth: 10,
      itemHeight: 10,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 735, name: "已付款", itemStyle: { color: "#FF8424" } },
          { value: 580, name: "待付款", itemStyle: { color: "#00ACBD" } },
          { value: 120, name: "已取消", itemStyle: { color: "#B0B7C6" } },
        ],
      },
    ],
  };

  return <div ref={keywords} style={{ width: "100%", height: "100%" }}></div>;
};

export default Pie;
